<template>
  <!-- <div class="layout_container"> -->
    <!-- <el-container class="home-container"> -->
    <!-- <div :class="$store.state.qi_user.isCollapse ? 'isCollapsemin' : 'isCollapsemax'">
      <el-menu router :collapse="$store.state.qi_user.isCollapse" active-text-color="#ffd04b" background-color="#545c64"
        text-color="#fff" :unique-opened="true" :collapse-transition="false" :default-active="activePath">
        <div class="logomain">
          <img src="@/assets/vue.svg" />
        </div>
        <el-sub-menu :index="item.id + ''" :key="i" v-for="(item, i) in iconsObjrtv.menus">
          <template #title>
            <el-icon v-if="$store.state.qi_user.isCollapse">
              <i :class="item.icon" class="iconimg"></i>
            </el-icon>
            <span :class="item.icon" class="iconimg" v-else>
              <text></text><text> {{ item.name }}</text></span>
          </template>
          <el-menu-item :index="'/' + sunItem.path" v-for="sunItem in item.children" :key="sunItem.id"
            @click="saveActivePath('/' + sunItem.path)">
            <span class="iconimg" :class="sunItem.icon"><text></text> <text>{{ sunItem.name }}</text></span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
    <div class="layoutright">
      <div class="layout_top">
        <Tabbar />
      </div>
      <div class="mainbox">
        <router-view></router-view>
      </div>
    </div>
  </el-container> -->
  <div class="common-layout" >
    <el-container>
      <el-aside width="200px" :class="$store.state.qi_user.isCollapse ? 'isCollapsemin' : 'isCollapsemax'" >
        <el-menu router :collapse="$store.state.qi_user.isCollapse" active-text-color="#ffd04b" background-color="#545c64"
        text-color="#fff" :unique-opened="true" :collapse-transition="false" :default-active="activePath">
        <div class="logomain">
          <img src="@/assets/vue.svg" />
        </div>
        <el-sub-menu :index="item.id + ''" :key="i" v-for="(item, i) in iconsObjrtv.menus">
          <template #title>
            <el-icon v-if="$store.state.qi_user.isCollapse">
              <i :class="item.icon" class="iconimg"></i>
            </el-icon>
            <span :class="item.icon" class="iconimg" v-else>
              <text></text><text> {{ item.name }}</text></span>
          </template>
          <el-menu-item :index="'/' + sunItem.path" v-for="sunItem in item.children" :key="sunItem.id"
            @click="saveActivePath('/' + sunItem.path)">
            <span class="iconimg" :class="sunItem.icon"><text></text> <text>{{ sunItem.name }}</text></span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
      </el-aside>
      <el-container>
        <el-header> <Tabbar /></el-header>
       <el-main>
        <router-view></router-view>
       </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue';
import { useRoute } from 'vue-router'
import { useStore } from 'vuex';
import Tabbar from '@/views/home/tabbar/index.vue'
let activePath = ref()
let route = useRoute()
onMounted(() => {
  activePath.value = route.path || '/'
})
const iconsObjrtv = reactive({
  menus: [
    {
      name: '首页',
      icon: 'custom-icon custom-icon-shouye1',
      id: 1,
      children: [
        {
          name: '首页',
          icon: 'custom-icon custom-icon-fenlei',
          path: 'home'
        }
      ]
    },
    {
      name: '数据大屏',
      icon: 'custom-icon custom-icon-daping',
      id: 15,
      children: [
        {
          name: '用户列表',
          icon: 'custom-icon custom-icon-fenlei',
          path: 'earth',
        }
      ]
    },
    {
      name: '权限管理',
      icon: 'custom-icon custom-icon-mima',
      id: 17,
      children: [
        {
          name: '用户管理',
          icon: 'custom-icon custom-icon-fenlei',
          path: 'acl/user',
          id: 181
        },
        {
          name: '角色管理',
          icon: 'custom-icon custom-icon-fenlei',
          path: 'acl/role',
          id: 182
        },
        {
          name: '菜单管理',
          icon: 'custom-icon custom-icon-fenlei',
          path: 'acl/permission',
          id: 183
        }

      ]
    },
    {
      name: '商品管理',
      icon: 'custom-icon custom-icon-shangpinguanli',
      id: 29,
      children: [
        {
          name: '品牌管理',
          icon: 'custom-icon custom-icon-fenlei',
          path: 'product/trademark',
          id: 31
        },
        {
          name: '属性管理',
          icon: 'custom-icon custom-icon-fenlei',
          path: 'product/attr',
          id: 32
        },
        {
          name: 'SPU管理',
          icon: 'custom-icon custom-icon-fenlei',
          path: 'product/spu',
          id: 33
        },
        {
          name: 'SKU管理',
          icon: 'custom-icon custom-icon-fenlei',
          path: 'product/sku',
          id: 34
        },
      ]
    },

  ],
});
const saveActivePath = (val) => {
  console.log(val);
  activePath.value = val
}

</script>
<style lang="scss">
.common-layout{
  height: 100%;
}
.el-menu {
  border: 0;
  height: 100%;
}

.isCollapsemin {
  width: 65px;
}

.isCollapsemax {
  width: 200px;
}

.logomain {
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
  }
}


.layout_container {
  height: 100vh;
  display: flex;

  .layoutright {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
}

.iconimg {
  text:first-child {
    padding-right: 6px;
  }
}

.mainbox {
  padding: 10px;
  // height: 100%;
  // background-color: red;
}
</style>